<template>
	<view class="OfferDetails" :style="{'padding-top':navigationHeight>0?navigationHeight + 88 + 'px':40 + 'px'}">

		<!-- <u-navbar title="套餐详情">
			<view class="IconBox" slot="right" @click="collectTc">
				<u-icon name="heart-fill" size="38" color="#FFAC3F" v-if="nowGroupObj.UserShopCollection"></u-icon>
				<u-icon name="heart-fill" size="38" color="#515151" v-else></u-icon>
			</view>
		</u-navbar> -->
		<view class="NavigationBox" :style="{'top': navigationHeight>0?navigationHeight + 44 + 'px': 0 + 'px'}">
			<u-tabs :list="NavList" v-if="NavList.length>0" :is-scroll="true" :current="current" @change="changeNav" bar-width="100" active-color="#FFAC3F" font-size="28" bar-height="4"></u-tabs>
		</view>
		<view class="OfferDetailsBox">
			<!-- 头部轮播图 -->
			<view class="OfferDetails_top">
				<view class="swiperBox" v-if="swiperList.length>0">
					<u-swiper :list="swiperList" height="394"></u-swiper>
				</view>
				<view class="shopBox">
					<view class="shopIcon">
						<image src="/static/mine/shop.png" mode=""></image>
					</view>
					<view class="shopName" style="display: flex;align-items: center;justify-content: space-between;width: calc(100% - 32upx);" v-if="nowGroupObj.shopObj"><text>{{nowGroupObj.shopObj.Shop.name}}</text><text>销量：{{nowGroupObj.sales_volume}}</text></view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 24upx 0 8upx 0;">
					<view class="shoptitle" style="max-width: calc(100% - 50upx);padding: 0;">
						{{nowGroupObj.name}}
					</view>
					<u-icon name="heart-fill" color="#FF5555" size="38" v-if="nowGroupObj.UserShopCollection" @click="collectTc"></u-icon>
					<u-icon name="heart-fill" color="#999" v-else size="38" @click="collectTc"></u-icon>
				</view>
				
				<!-- <view class="DiscountBox">
					<view class="DiscountItemBox">
						<view class="DiscountItem" v-for="(item,index) in 3">
							<u-icon name="checkmark-circle"></u-icon>
							<view class="DiscountName">免预约</view>
						</view>
					</view>
					<view class="volume">半年销量 452</view>
				</view> -->
			</view>
			<!-- 头部轮播图 -->
			<!-- 套餐详情 -->
			<!-- <view class="explainBox"> -->
				<!-- <view class="RichBox">
					<u-parse :html="content"></u-parse>
				</view>
				<view class="RichBox">
					<u-parse :html="content"></u-parse>
				</view> -->
				<!-- <editor class="richInputContent" id="editor" @input="getEditorContent" @ready="onEditorReady" v-model="html"></editor> -->
			<!-- </view> -->
			<view class="explainBox">
				<view class="tcDetailTit">套餐详情</view>
				<view class="tcDetailB">
					<view class="tcDetailBItem" v-for="(item,index) in nowGroupObj.package_title" :key="index" v-if="nowGroupObj.package_title">
						<view class="tcDetailBItemT">
							{{item.name}}
						</view>
						<view class="tcDetailBItemB">
							<view v-for="(pitem,pindex) in item.conList">
								<view>{{pitem.name}}</view>
								<view>￥{{pitem.price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="explainBox">
				<view class="tcDetailTit">购买须知</view>
				<view class="tcDetailB">
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;" v-if="nowGroupObj.effective_time_str">团单有效期：{{nowGroupObj.effective_time_str}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">使用时间：{{nowGroupObj.limit_time==0?"与门店营业时间同步":(nowGroupObj.limit_time?nowGroupObj.limit_time.str:"与门店营业时间同步")}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">节假日是否可用：{{nowGroupObj.is_holidays==0?"否":"是"}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">休息日是否可用：{{nowGroupObj.is_rest==0?"否":"是"}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">是否需要预约：{{nowGroupObj.is_appointment==0?"否":"是"}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">使用人数：{{nowGroupObj.use_num==0?"不限制":nowGroupObj.use_num+"人"}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">是否与其他优惠同享：{{nowGroupObj.is_discount_share==0?"否":"是"}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;" v-if="nowGroupObj.remind">备注：{{nowGroupObj.remind}}</view>
				</view>
			</view>
			<view class="explainBox">
				<view class="tcDetailTit">详细介绍</view>
				<!-- <view class="tcDetailB" style="display: flex;flex-direction: column;">
					<view v-if="nowGroupObj.content.startTxt">{{nowGroupObj.content.startTxt}}</view>
					<view v-for="(item,index) in nowGroupObj.content.richTxt" :key="index" style="display: flex;flex-direction: column;">
						<image :src="getImage(item.img)" v-if="item.img" mode="widthFix" style="width: 100%;"></image>
						<view v-if="item.txt">{{item.txt}}</view>
					</view>
				</view> -->
				<view class="tcDetailB">
					<u-read-more ref="uReadMore" showHeight="400" v-if="nowGroupObj.conStr" :toggle="true">
						<!-- <u-parse :content="nowGroupObj.conStr" @load="load"></u-parse> -->
						<rich-text :nodes="nowGroupObj.conStr"></rich-text>
					</u-read-more>
				</view>
			</view>
			<!-- 套餐详情 -->
			<!-- 适用用户 -->
			<view class="addressBox">
				<view class="addressTitleBox" @click="toBranchStore" v-if="nowGroupObj.ShopPackageRelation">
					<view class="addresstitle">适用商户（{{nowGroupObj.ShopPackageRelation.length}}）</view>
					<u-icon name="arrow-right" color="#BFBFBF"></u-icon>
				</view>
				<view class="addressNameBox" v-if="nowGroupObj.shopObj">
					<view class="addressName">{{nowGroupObj.shopObj.Shop.name}}</view>
					<u-icon name="phone-fill" color="#FFAC3F" @click="callPhone"></u-icon>
				</view>
				<view class="Detailed-address" v-if="nowGroupObj.shopObj" @click="toNav">
					<view class="Detailed_L">
						<u-icon name="map" color="#BFBFBF" size="40"></u-icon>
						<view class="Detailedtext">{{nowGroupObj.shopObj.Shop.detailed_address}}</view>
					</view>
					<view class="Detailed_R">
						<view class="DetailedNum">{{nowGroupObj.shopObj.distance}}km</view>
						<u-icon name="arrow-right" color="#BFBFBF"></u-icon>
					</view>
				</view>
			</view>
			<!-- 适用用户 -->
			<!-- 评价开始 -->
			<view class="evaluateBox">
				<view class="feedbackBox" @click="toFeedback">
					<view class="feedbacktitle">达人反馈({{evaTotal}})</view>
					<u-icon name="arrow-right" color="#BFBFBF"></u-icon>
				</view>
				<view class="evaluateList">
					<view class="evaluateItem" v-for="(item,index) in evaList" :key="index" :data-id="item.id" @click="toContent">
						<view class="userImage" :style="{'background-image':'url('+getImage(item.user.image_url)+')'}">
							<!-- <image :src="getImage(item.user.image_url)" mode=""></image> -->
						</view>
						<view class="evaluateInfo">
							<view class="userName">{{item.user.username}}</view>
							<view class="evaluatetitme">{{item.create_time}}</view>
							<view class="evaluatecont">{{item.content}}</view>
							<view class="evaluateImage">
								<view class="ImageItem" v-for="(pitem,pindex) in item.ShareImage" :key="pindex" :style="{'background-image':'url('+pitem.titleImage+')'}">
									<!-- <image :src="pitem.titleImage" mode=""></image> -->
								</view>
							</view>
						</view>
					</view>
					<view class="MoreEvaluation" @click="toFeedback">
						<view class="MoreName">查看全部</view>
						<u-icon name="arrow-right" color="#BFBFBF"></u-icon>
					</view>
				</view>
			</view>
			<!-- 评价结束 -->
			<view class="bottomBtn">
				<view class="fansbtn" @click="showPlatform">
					<!-- <view class="btnIcon">
						<image src="/static/index/fans.png" mode=""></image>
					</view> -->
					<view class="btntext">
						<view class="fansNum">探店达人</view>
						<view class="fansNum">限时免单</view>
					</view>
				</view>
				<view class="sharebtn" @click="toSharePosters">
					<!-- #ifdef APP -->
					<view class="btntext">分享赚 ￥{{nowGroupObj.user_commission_money}}</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="btntext">分享</view>
					<!-- #endif -->
				</view>
				<view class="Rushbtn" @click="toRushToBuy">
					<view class="btntext">
						<view class="fansNum">￥{{nowGroupObj.money?nowGroupObj.money:0}} 立即抢购</view>
						<view class="fansNum" v-if="nowGroupObj.stock_num>0">仅剩 {{nowGroupObj.num?nowGroupObj.num:0}} 份</view>
						<view class="fansNum" v-else>不限份数</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shareMark" v-if="shareFlag" @click="hideShare"></view>
		<view class="shareCon" v-if="shareFlag">
			<view class="shareItem" @click="toMaterial">
				<image src="../../static/index/WeChat.png"></image>
				<view>素材</view>
			</view>
			<!-- #ifdef APP -->
			<view class="shareItem" @click="shareWeiXin">
				<image src="../../static/index/WeChat.png"></image>
				<view>微信好友</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="share" class="shareBtns">
				<view class="shareItem">
					<image src="../../static/index/WeChat.png"></image>
					<view>微信好友</view>
				</view>
			</button>
			<!-- #endif -->
			<view class="shareItem" @click="savePhoto">
				<image src="../../static/index/savePhoto.png"></image>
				<view>保存相册</view>
			</view>
		</view>
		<image class="posterUrl" :src="posterUrl" mode="heightFix" v-if="shareFlag&&posterUrl"></image>
		<view class="poster">
			<image src="../../static/share/backT.png" class="backT"></image>
			<image src="../../static/share/back.png" class="backMain"></image>
			<image src="../../static/share/backB.png" class="backB"></image>
			<image src="../../static/share/backLTxt.png" class="backLTxt"></image>
			<image src="../../static/share/backRTd.png" class="backRDr"></image>
			<view class="conT">
				<view class="conUserMsg">{{shareStr}}</view>
				<view class="conCardList" v-if="nowGroupObj.title_image">
					<image :src="getImage(nowGroupObj.title_image)" mode="widthFix" class="conCardListImg"></image>
				</view>
			</view>
			<view class="conB">
				<!-- <view class="conBL">
					<image :src="getImage(info.image_url)" class="conBLImg"></image>
				</view> -->
				<view class="conBC">
					<view class="conBCName">与【{{userInfo.username}}】一起在若免</view>
					<view class="conBCIntro">分享好物，更多惊喜等你搜寻！</view>
				</view>
				<view class="conBR">
					<image :src="codeImg" class="conBRImg"></image>
				</view>
			</view>
		</view>
		<canvas v-if="canvasFlag"
			:style="{'width':posterData.poster.width +'px','height':posterData.poster.height +'px'}" class="can"
			canvas-id="mycan" style="position: fixed;top: -9999999px;"></canvas>
		<view class="platformMark" v-if="platformFlag"></view>
		<view class="platformWrap" v-if="platformFlag">
			<view class="platformTit">选择粉丝平台</view>
			<view class="platformItem" style="background: #260A20;">
				<image src="../../static/mine/douyin_white.png" style="width: 48upx;height: 48upx;"></image>
				<view>粉丝1w+  限时免单</view>
			</view>
			<view class="platformItem" style="background: #F40A0B;">
				<image src="../../static/mine/xiaohongshu_white.png" style="width: 64upx;height: 24upx;"></image>
				<view>粉丝1w+  限时免单</view>
			</view>
			<view class="platformItem" style="background: #F36326;">
				<image src="../../static/mine/dazong_white.png" style="width: 48upx;height: 48upx;"></image>
				<view>粉丝1w+  限时免单</view>
			</view>
			<view class="platformItem" style="background: #FFD974;margin-bottom: 0;">
				<image src="../../static/mine/weibo_white.png" style="width: 42upx;height: 32upx;"></image>
				<view>粉丝1w+  限时免单</view>
			</view>
			<view class="platformCancel" @click="hidePlatform">取消</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				NavList:[],
				current:0,
				swiperList: [],
				content: `<p>露从今夜白，月是故乡明</p><img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />`,
				navigationHeight:0,
				platformFlag:false,
				id:"",
				nowGroupObj:{},
				groupList:[],
				evaTotal:0,
				evaList:[],
				shareFlag:false,
				userInfo:{},
				shareStr:"",
				codeImg:"",
				posterData:{},
				canvasFlag:false,
				posterUrl:"",
				groupId:""
			}
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getShareList();
		},
		//微信小程序分享
		onShareAppMessage(res) {
		  // if (res.from === 'button') {// 来自页面内分享按钮
		  //   // console.log(res)
		  // }
		  if(uni.getStorageSync("rmToken")){
			  return {
			    title: this.shareStr,
			    path: '/pages/pagethree/pages/OfferDetails/OfferDetails?type=tg&shareid='+uni.getStorageSync("userId")+"&tgid="+this.groupId,
			  	imageUrl:this.getImage(this.nowGroupObj.title_image)
			  }
		  }else{
			  return {
			    title: this.shareStr,
			    path: '/pages/pagethree/pages/OfferDetails/OfferDetails?type=tg&tgid='+this.groupId,
			  	imageUrl:this.getImage(this.nowGroupObj.title_image)
			  }
		  }
		},
		onLoad(options) {
			if(options.id){
				this.groupId = options.id;
				this.getDetail();
				this.getShareList();
			}
			if(options.tgid){
				this.groupId = options.tgid;
				this.getDetail();
				this.getShareList();
			}
			this.getQrcode();
			this.userInfo = uni.getStorageSync("rmUser");
			let _that = this;
			// uni.getSystemInfo({
			// 	success(e) {
			// 		console.log(e);
			// 		_that.navigationHeight = e.statusBarHeight;
			// 	}
			// })
		},
		onShow() {
			if(this.groupId){
				this.getDetail();
				this.getShareList();
			}
			this.getQrcode();
			this.userInfo = uni.getStorageSync("rmUser");
		},
		methods: {
			toNav(){
				// #ifdef MP-WEIXIN
				app.$vm.checkAuth("scope.userLocation").then(result=>{
					if(result){
						uni.openLocation({
							address:this.nowGroupObj.shopObj.Shop.detailed_address,
							latitude:Number(this.nowGroupObj.shopObj.Shop.dimension),
							longitude:Number(this.nowGroupObj.shopObj.Shop.longitude)
						})
					}else{
						uni.showModal({
							title:"请检查系统定位和定位授权是否打开后重试"
						})
					}
				})
				// #endif
				// #ifdef APP
				uni.openLocation({
					address:this.nowGroupObj.shopObj.Shop.detailed_address,
					latitude:Number(this.nowGroupObj.shopObj.Shop.dimension),
					longitude:Number(this.nowGroupObj.shopObj.Shop.longitude)
				})
				// #endif
			},
			hideShare(){
				this.shareFlag = false;
			},
			shareWeiXin(){
				if(uni.getStorageSync("rmToken")){
					uni.share({
					  provider: "weixin",
					  scene: "WXSceneSession",
					  type: 0,
					  href: "https://www.ruomiankj.com/appShare.html?type=tg&tgid="+this.groupId+"&shareid="+uni.getStorageSync("userId"),
					  title: this.nowGroupObj.name,
					  summary: this.shareStr,
					  imageUrl: "https://ruomian.oss-cn-chengdu.aliyuncs.com/logo108.png",
					  success: function (res) {
					    console.log("success:" + JSON.stringify(res));
					  },
					  fail: function (err) {
					    console.log("fail:" + JSON.stringify(err));
					  }
					});
				}else{
					uni.share({
					  provider: "weixin",
					  scene: "WXSceneSession",
					  type: 0,
					  href: "https://www.ruomiankj.com/appShare.html?type=tg&tgid="+this.groupId,
					  title: this.nowGroupObj.name,
					  summary: this.shareStr,
					  imageUrl: "https://ruomian.oss-cn-chengdu.aliyuncs.com/logo108.png",
					  success: function (res) {
					    console.log("success:" + JSON.stringify(res));
					  },
					  fail: function (err) {
					    console.log("fail:" + JSON.stringify(err));
					  }
					});
				}
			},
			toMaterial(){
				let arr = [];
				arr.push({url:this.posterUrl,flag:true});
				for(let i=0;i<this.nowGroupObj.images.length;i++){
					arr.push({url:this.getImage(this.nowGroupObj.images[i].image_url),flag:true});
				}
				let obj = {};
				obj.imgArr = arr;
				obj.shareTxt = this.shareStr;
				uni.setStorageSync("materialData",obj);
				uni.navigateTo({
					url:"/pages/pagethree/pages/material/material"
				})
			},
			getQrcode(){
				let obj = {};
				// #ifdef MP-WEIXIN
				obj.type = 1;
				// #endif
				// #ifdef APP
				obj.type = 2;
				// #endif
				obj.data = {};
				obj.data.type = "tg";
				if(uni.getStorageSync("rmToken")){
					obj.data.shareid = uni.getStorageSync("userId");
				}
				obj.data.tgid = this.groupId;
				// obj.data.mdid = this.nowGroupObj.shopObj.shop_id;
				this.$u.api.qrcode(obj).then(res=>{
					console.log(res);
					this.codeImg = res.data.data.replace(/[\n\r]/g,'');
				})
			},
			getElementInfo(name) {
				let _this = this;
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + name).boundingClientRect(data => {
						_this.posterData[name] = data;
						console.log(_this.posterData)
						resolve(data)
					}).exec();
				})
			
			},
			savePhoto(){
				uni.saveImageToPhotosAlbum({
					filePath: this.posterUrl,
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
						});
					},
					fail:err=>{
						console.log(err)
					}
				});
			},
			getPoster() {
				uni.showLoading({
					title:"生成海报中..."
				})
				let promiseArr = [
					this.getElementInfo("poster"),
					this.getElementInfo("backT"),
					this.getElementInfo("backMain"),
					this.getElementInfo("backB"),
					this.getElementInfo("backLTxt"),
					this.getElementInfo("backRDr"),
					this.getElementInfo("conT"),
					this.getElementInfo("conUserMsg"),
					this.getElementInfo("conCardListImg"),
					this.getElementInfo("conBCName"),
					this.getElementInfo("conBCIntro"),
					this.getElementInfo("conBR"),
					this.getElementInfo("conBRImg")
				];
				
				let ctx = uni.createCanvasContext('mycan');
				// this.getImageInfo("../../static/share/back.png","backMain").then(res=>{
				// 	console.log(res)
				// })
				console.log(ctx)
				Promise.all(promiseArr).then(res=>{
					this.canvasFlag = true;
					this.$forceUpdate();
					ctx.drawImage("/static/share/back.png", this.posterData.backMain.left, this.posterData.backMain
						.top, this.posterData.backMain.width, this.posterData.backMain.height);
					ctx.drawImage("/static/share/backB.png", this.posterData.backB.left, this.posterData.backB.top,
						this.posterData.backB.width, this.posterData.backB.height);
					ctx.drawImage("/static/share/backT.png", this.posterData.backT.left, this.posterData.backT.top,
						this.posterData.backT.width, this.posterData.backT.height);
					ctx.drawImage("/static/share/backLTxt.png", this.posterData.backLTxt.left, this.posterData
						.backLTxt.top, this.posterData.backLTxt.width, this.posterData.backLTxt.height);
					ctx.drawImage("/static/share/backRTd.png", this.posterData.backRDr.left, this.posterData
						.backRDr.top, this.posterData.backRDr.width, this.posterData.backRDr.height);
					ctx.save();
					ctx.setFillStyle("#FFFFFF");
					ctx.setStrokeStyle('#FFFFFF')
					ctx.setLineJoin('round'); //交点设置成圆角
					ctx.setLineWidth(16);
					ctx.strokeRect(this.posterData.conT.left + 8, this.posterData.conT.top + 8, this.posterData
						.conT.width - 16, this.posterData.conT.height - 16);
					ctx.fillRect(this.posterData.conT.left + 16, this.posterData.conT.top + 16, this.posterData
						.conT.width - 32, this.posterData.conT.height - 32);
					ctx.stroke();
					ctx.closePath();
					ctx.save();
					ctx.restore();
					ctx.font = "bold 14px Microsoft YaHei";
					ctx.fillStyle = "#3F3F3F";
					ctx.textBaseline = "bottom";
					let intros = ""
					var chr = this.shareStr.split("");
					var temp = "";
					var row = [];
					console.log(chr)
					for (var a = 0; a < chr.length; a++) {
						if (temp.length*14 < this.posterData.conUserMsg.width) {;
						} else {
							row.push(temp);
							temp = "";
						}
						temp += chr[a];
					}
					row.push(temp);
					for (var b = 0; b < row.length; b++) {
						ctx.fillText(row[b], this.posterData.conUserMsg.left, this.posterData.conUserMsg.top + (b + 1) * 20);
					}
					ctx.restore();
					app.$vm.getImgBase(this.getImage(this.nowGroupObj.title_image)).then(rekl=>{
						ctx.drawImage(rekl, this.posterData.conCardListImg.left, this.posterData.conCardListImg.top, this.posterData.conCardListImg.width, this.posterData.conCardListImg.height);
						ctx.font = "15px Microsoft YaHei";
						ctx.fillStyle = "#FFFFFF";
						ctx.textBaseline = "middle";
						ctx.fillText('与【'+this.userInfo.username+'】一起在若免', this.posterData['conBCName'].left, this.posterData['conBCName'].top + 11);
						ctx.save();
						ctx.restore();
						ctx.font = "12px Microsoft YaHei";
						ctx.fillStyle = "#FFFFFF";
						ctx.textBaseline = "middle";
						ctx.fillText('分享好物，更多惊喜等你搜寻！', this.posterData['conBCIntro'].left, this.posterData['conBCIntro'].top + 9);
						ctx.save();
						ctx.restore();
						ctx.setFillStyle("#FFFFFF");
						ctx.fillRect(this.posterData['conBR'].left,this.posterData['conBR'].top,this.posterData['conBR'].width,this.posterData['conBR'].height);
						// #ifdef MP-WEIXIN
						let fsm = wx.getFileSystemManager();  //文件管理器
						let FILE_BASE_NAME = new Date().getTime(); //文件名
						let format = 'png'; //文件后缀
						console.log(this.codeImg)
						let buffer = wx.base64ToArrayBuffer(this.codeImg.split(",")[1]); //base 转二进制
						let filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
						console.log(filePath)
						let _this = this;
						fsm.writeFile({ //写文件
						      filePath,
						      data: buffer,
						      encoding: 'binary',
						      success:rem1=>{
						
						        wx.getImageInfo({ //读取图片
						          src: filePath,
						          success: rem2=> {
						
						            ctx.drawImage(rem2.path,this.posterData['conBRImg'].left,this.posterData['conBRImg'].top,this.posterData['conBRImg'].width,this.posterData['conBRImg'].height) //画图
						            ctx.save();
						            console.log("```````````````````````````````````````````2",ctx)
						            ctx.draw(false, () => {
						            	console.log("```````````````````````````````````````````3")
						            	let _this = this;
						            	setTimeout(function() {
						            		uni.canvasToTempFilePath({
						            			canvasId: 'mycan',
						            			fileType: 'jpg',
						            			x: 0,
						            			y: 0,
						            			quality:1,
						            			success: function(res) {
						            				console.log(res.tempFilePath)
						            				// 在这里保存图片
													_this.posterUrl = res.tempFilePath;
													_this.$forceUpdate();
						            				uni.hideLoading()
						            			},
						            			fail: function(error) {
						            				console.log(error)
						            			},							})
						            	}, 500)
						            })
						          },
						          error(res) {
						            console.log({
						              res
						            })
						          }
						        })
						      },
							  fail:err=>{
								  console.log(err)
							  }
						    })
						// #endif
						// #ifdef APP
						ctx.drawImage(this.codeImg,this.posterData['conBRImg'].left,this.posterData['conBRImg'].top,this.posterData['conBRImg'].width,this.posterData['conBRImg'].height);
						ctx.save();
						console.log("```````````````````````````````````````````2")
						ctx.draw(false, (() => {
							console.log("```````````````````````````````````````````3")
							let _this = this;
							setTimeout(function() {
								uni.canvasToTempFilePath({
									canvasId: 'mycan',
									fileType: 'jpg',
									x: 0,
									y: 0,
									quality:1,
									success: function(res) {
										console.log(res.tempFilePath)
										// 在这里保存图片
										_this.posterUrl = res.tempFilePath;
										
										uni.hideLoading()
										_this.$forceUpdate();
									},
									fail: function(error) {
										console.log(error)
									},							})
							}, 500)
						})())
						// #endif
					})
				})
				
			},
			getVideoUrl(url) {
				return app.$vm.globalData.imgBaseUrl + url + app.$vm.globalData.videoThumb;
			},
			getImage(url) {
				if (url && (url.indexOf("http://") != -1 || url.indexOf("https://") != -1)) {
					return url;
				} else {
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			toContent(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pagetwo/pages/FindDetail/FindDetail?id="+id
				})
			},
			getShareList(){
				let obj = {};
				obj.shop_package_id = this.groupId;
				let newObj = {};
				newObj.page = this.page;
				newObj.data = obj;
				if(uni.getStorageSync("rmToken")){
					this.$u.api.shareList(newObj).then(res=>{
						console.log(res)
						this.evaTotal = res.data.list.total;
						if(this.page == 1){
							this.evaList = res.data.list.data.map(cur=>{
								if(cur.ShareImage.length>0){
									cur.ShareImage = cur.ShareImage.map(pcur=>{
										if (app.$vm.isImage(pcur.image_url)) {
											pcur.titleImage = this.getImage(pcur.image_url);
											pcur.imgType = true;
										} else {
											pcur.titleImage = this.getVideoUrl(pcur.image_url);
											pcur.imgType = false;
										}
										return pcur;
									})
								}else{
									cur.imgType = true;
								}
								return cur;
							});
						}else{
							this.evaList = this.evaList.concat(res.data.list.data.map(cur=>{
								if(cur.ShareImage.length>0){
									cur.ShareImage = cur.ShareImage.map(pcur=>{
										if (app.$vm.isImage(pcur.image_url)) {
											pcur.titleImage = this.getImage(pcur.image_url);
											pcur.imgType = true;
										} else {
											pcur.titleImage = this.getVideoUrl(pcur.image_url);
											pcur.imgType = false;
										}
										return pcur;
									})
								}else{
									cur.imgType = true;
								}
								return cur;
							}));
						}
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				}else{
					this.$u.api.indexShareList(newObj).then(res=>{
						console.log(res)
						this.evaTotal = res.data.list.total;
						if(this.page == 1){
							this.evaList = res.data.list.data.map(cur=>{
								if(cur.ShareImage.length>0){
									cur.ShareImage = cur.ShareImage.map(pcur=>{
										if (app.$vm.isImage(pcur.image_url)) {
											pcur.titleImage = this.getImage(pcur.image_url);
											pcur.imgType = true;
										} else {
											pcur.titleImage = this.getVideoUrl(pcur.image_url);
											pcur.imgType = false;
										}
										return pcur;
									})
								}else{
									cur.imgType = true;
								}
								return cur;
							});
						}else{
							this.evaList = this.evaList.concat(res.data.list.data.map(cur=>{
								if(cur.ShareImage.length>0){
									cur.ShareImage = cur.ShareImage.map(pcur=>{
										if (app.$vm.isImage(pcur.image_url)) {
											pcur.titleImage = this.getImage(pcur.image_url);
											pcur.imgType = true;
										} else {
											pcur.titleImage = this.getVideoUrl(pcur.image_url);
											pcur.imgType = false;
										}
										return pcur;
									})
								}else{
									cur.imgType = true;
								}
								return cur;
							}));
						}
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				}
			},
			collectTc(){
				let obj = {};
				obj.shop_package_id = this.groupId;
				if(this.nowGroupObj.UserShopCollection){
					this.$u.api.userShopEvaluationCollectionDel(obj).then(res=>{
						console.log(res)
						this.$refs.uToast.show({
							title:"取消收藏成功",
							type:"success",
							duration:2000
						})
						this.nowGroupObj.UserShopCollection = 0;
					})
				}else{
					this.$u.api.userShopEvaluationCollectionAdd(obj).then(res=>{
						console.log(res)
						this.$refs.uToast.show({
							title:"收藏成功",
							type:"success",
							duration:2000
						})
						this.nowGroupObj.UserShopCollection = 1;
					})
				}
			},
			load() {
				this.$refs.uReadMore.init();
			},
			callPhone(){
				if(!this.nowGroupObj.shopObj.Shop.mobile){
					this.$refs.uToast.show({
						title:"暂未设置",
						type:"error",
						duration:2000
					})
					return false;
				}
				uni.makePhoneCall({
					phoneNumber:this.nowGroupObj.shopObj.Shop.mobile.trim()
				})
			},
			getGroupList(id){
				let obj = {};
				obj.shop_id = id;
				let newObj = {};
				newObj.page = 1;
				newObj.limit = 10000;
				newObj.data = obj;
				this.$u.api.shopPackageRelationList(newObj).then(res=>{
					console.log(res)
					this.groupList = res.data.list.data;
					for(let i=0;i<this.groupList.length;i++){
						if(this.groupId==this.groupList[i].shop_package_id){
							this.current = i;
						}
					}
					console.log(this.current)
					let arr = [];
					for(let i=0;i<this.groupList.length;i++){
						arr.push({name:this.groupList[i].ShopPackage.name})
					}
					this.NavList = arr;
					// for(let i=0;i<this.groupList.length;i++){
					// 	if(this.groupList[i].id==this.groupId){
					// 		this.nowGroupObj = this.groupList[i];
					// 	}
					// }
				})
			},
			getDetail(){
				this.$u.api.shopPackageDetails({id:this.groupId}).then(res=>{
					console.log(res)
					res.data.details.content = JSON.parse(res.data.details.content);
					let conStr = "";
					if(res.data.details.content.startTxt){
						conStr = conStr + `<div>${res.data.details.content.startTxt}</div>`;
					}
					if(res.data.details.content.richTxt){
						for(let i=0;i<res.data.details.content.richTxt.length;i++){
							let strK = `<div style="display: flex;flex-direction: column;">`;
							if(res.data.details.content.richTxt[i].img){
								strK = strK + `<img src="${this.getImage(res.data.details.content.richTxt[i].img)}" mode="widthFix" style="width: 100%;" />`;
							}
							if(res.data.details.content.richTxt[i].txt){
								strK = strK + `<div>${res.data.details.content.richTxt[i].txt}</div>`;
							}
							strK = strK + "</div>"
							conStr = conStr + strK;
						}
					}
					
					res.data.details.conStr = conStr;
					this.nowGroupObj = res.data.details;
					
					this.nowGroupObj.limit_time = JSON.parse(this.nowGroupObj.limit_time);
					let arrSwi = [];
					for(let i=0;i<this.nowGroupObj.images.length;i++){
						arrSwi.push({image:this.getImage(this.nowGroupObj.images[i].image_url)})
					}
					this.swiperList = arrSwi;
					if(this.nowGroupObj.is_specified_time==0){
						this.nowGroupObj.effective_time_str = "购买之日起" + this.nowGroupObj.effective_time/24/60/60 + "天内可用";
					}else{
						this.nowGroupObj.effective_time_str = app.$vm.getTime(this.nowGroupObj.effective_time*1000,"-","day") + "到期";
					}
					
					if(this.nowGroupObj.package_title){
						let arr = JSON.parse(this.nowGroupObj.package_title);
						let pArr = [];
						for(let i=0;i<arr.length;i++){
							let price = 0;
							if(arr[i].conList){
								for(let j=0;j<arr[i].conList.length;j++){
									price = price + Number(arr[i].conList[j].price);
								}
							}
							pArr.push(price);
						}
						let money = pArr.length>0?pArr[0]:0;
						for(let i=0;i<pArr.length;i++){
							if(money<pArr[i]){
								money = pArr[i];
							}
						}
						this.nowGroupObj.oldMoney = money;
						this.nowGroupObj.package_title = arr;
					}else{
						this.nowGroupObj.oldMoney = 0;
					}
					this.nowGroupObj.ShopPackageRelation = this.nowGroupObj.ShopPackageRelation.map(pcur=>{
						let dis = app.$vm.getDistance(Number(pcur.Shop.dimension),Number(pcur.Shop.longitude));
						pcur.distance = dis;
						return pcur;
					})
					let obj = {};
					for(let i=0;i<this.nowGroupObj.ShopPackageRelation.length;i++){
						if(i==0){
							obj = this.nowGroupObj.ShopPackageRelation[i];
						}else{
							if(this.nowGroupObj.ShopPackageRelation[i].distance<obj.distance){
								obj = this.nowGroupObj.ShopPackageRelation[i];
							}
						}
					}
					this.nowGroupObj.shopObj = obj;
					this.shareStr = "【"+this.nowGroupObj.shopObj.Shop.BusinessAreas.name+"】的【"+this.nowGroupObj.shopObj.Shop.name+"】正在打折：【"+this.nowGroupObj.name+"】仅售"+this.nowGroupObj.money+"元！立即抢购！！"
					this.getGroupList(this.nowGroupObj.shopObj.shop_id);
					setTimeout(()=>{
						this.load();
					},500)
				})
			},
			hidePlatform(){
				this.platformFlag = false;
			},
			showPlatform(){
				// this.platformFlag = true;
				let obj = {};
				obj.shop_package_id = this.nowGroupObj.id;
				obj.dimension = app.$vm.globalData.latitude;
				obj.longitude = app.$vm.globalData.longitude;
				let newObj = {};
				newObj.page = this.page;
				newObj.data = obj;
				this.$u.api.shopEvaluationRelationList(newObj).then(res=>{
					if(res.data.list.data.length>0){
						uni.navigateTo({
							url:"/pages/pagethree/pages/offerDetailsList/offerDetailsList?id="+this.nowGroupObj.id
						})
					}else{
						uni.showToast({
							title:"名额已满",
							icon:'none',
							duration:2000
						})
					}
				})
				
			},
			toSharePosters(){
				this.shareFlag = true;
				this.getPoster();
			},
			toRushToBuy(){
				uni.setStorageSync("buyData",this.nowGroupObj);
				uni.navigateTo({
					url:"/pages/pagefour/pages/RushTo-buy/RushTo-buy"
				})
			},
			toFeedback(){
				uni.navigateTo({
					url:"/pages/pagetwo/pages/Feedback/Feedback?type=good&id="+this.groupId
				})
			},
			//适用用户
			toBranchStore(){
				let arr = this.nowGroupObj.ShopPackageRelation;
				uni.setStorageSync("groupStore",arr);
				uni.navigateTo({
					url:"/pages/pageone/pages/BranchStore/BranchStore"
				})
				// uni.navigateTo({
				// 	url:"/pages/pagefive/pages/storeList/storeList"
				// })
			},
			changeNav(index){
				this.current = index;
				this.groupId = this.groupList[index].shop_package_id;
				this.getDetail();
			}
		}
	}
</script>

<style scoped lang="less">
	.shareBtns{
		background: white !important;
		margin: 0 !important;
		padding: 0 !important;
		outline: none !important;
		border: none !important;
	}
	.shareBtns::before{
		border: none !important;
	}
	.shareBtns::after{
		border: none !important;
	}
	.shareCon{
		width: 100%;
		height: 180upx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: white;
		z-index: 1000000;
		box-sizing: border-box;
		padding: 0 70upx;
		display: flex;
		justify-content: space-between;
	}
	.shareItem{
		// width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 20upx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.shareItem>image{
		width: 90upx;
		height: 90upx;
	}
	.shareItem>view{
		font-size: 28upx;
		line-height: 28upx;
		color: #3F3F3F;
	}
	.shareMark{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.5);
		z-index: 999999;
	}
	
	.posterUrl{
		// width: 542upx;
		height: 60%;
		bottom: 212upx;
		left: 50%;
		transform: translateX(-50%);
		position: fixed;
		z-index: 1000000;
	}
	
	.conB {
		width: 100%;
		margin-top: 24upx;
		display: flex;
		box-sizing: border-box;
		padding: 0 10upx;
		align-items: center;
		height: 138upx;
	}
	
	.conBL {
		width: 124upx;
		height: 124upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: white;
		margin-right: 16upx;
	}
	
	.conBL>image {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
	}
	
	.conBC {
		width: calc(100% - 154upx);
		height: 138upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.conBC>view:nth-child(1) {
		font-size: 30upx;
		line-height: 42upx;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		margin-bottom: 8upx;
	}
	
	.conBC>view:nth-child(2) {
		font-size: 24upx;
		line-height: 34upx;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		// margin-bottom: 8upx;
	}
	
	.conBR {
		width: 138upx;
		height: 138upx;
		background: white;
		border-radius: 8upx;
		margin-left: 16upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.conBR>image {
		width: 114upx;
		height: 114upx;
		border-radius: 8upx;
	}
	
	
	
	.conCardList {
		margin-top: 32upx;
	}
	.conCardList>image{
		width: 100%;
	}
	
	.conCardItem {
		width: 100%;
		height: 126upx;
		box-sizing: border-box;
		padding: 20upx 30upx 26upx 20upx;
		display: flex;
		align-items: center;
		background-image: url(../../static/share/shareItem.png);
		background-position: 0 0;
		background-size: 100% 100%;
		margin-bottom: 20upx;
	}
	
	.conCardItem:last-child {
		margin-bottom: 0;
	}
	
	.cardAvator {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 12upx;
	}
	
	.cardShareIcon {
		width: 54upx;
		height: 52upx;
		margin-left: 12upx;
	}
	
	.cardInfo {
		width: calc(100% - 158upx);
		height: 80upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.cardInfo>view:nth-child(1) {
		font-size: 28upx;
		color: #3F3F3F;
		font-weight: bold;
		line-height: 40upx;
		margin-bottom: 6upx;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.cardInfo>view:nth-child(2) {
		display: flex;
		align-items: center;
	}
	
	.cardInfo>view:nth-child(2)>view {
		font-size: 24upx;
		color: #3F3F3F;
		line-height: 34upx;
	}
	
	.cardInfo>view:nth-child(2)>view:nth-child(1) {
		margin-right: 20upx;
	}
	
	
	.conT {
		width: 100%;
		box-sizing: border-box;
		padding: 56upx 40upx 58upx;
		border-radius: 16upx;
		background: white;
	}
	
	.conAvator {
		width: 100%;
		height: 124upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.conAvatorL {
		width: 124upx;
		height: 124upx;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16upx;
		position: relative;
	}
	
	.avatorBack {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	.avatorCon {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
		position: relative;
		z-index: 9;
	}
	
	.conAvatorR {
		width: calc(100% - 140upx);
		height: 124upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.conAvatorRT {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.conAvatorRT>view {
		font-size: 32upx;
		line-height: 44upx;
		color: #3F3F3F;
		font-weight: bold;
	}
	
	.conAvatorRT>image {
		width: 18upx;
		height: 28upx;
		margin-left: 8upx;
	}
	
	.conAvatorRB {
		font-size: 28upx;
		color: #3F3F3F;
		line-height: 40upx;
		margin-top: 16upx;
	}
	
	.conUserMsg {
		// margin-top: 16upx;
		width: 100%;
		line-height: 20px;
		color: #3F3F3F;
		font-size: 14px;
		white-space: pre-wrap;
		font-weight: bold;
	}
	
	
	
	
	.backLTxt {
		width: 102upx;
		height: 50upx;
		position: absolute;
		top: 64upx;
		left: 34upx;
		z-index: 1;
	}
	
	.backRDr {
		width: 190upx;
		height: 52upx;
		position: absolute;
		right: 36upx;
		top: 64upx;
		z-index: 1;
	}
	
	.poster {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 122upx 32upx 24upx;
		z-index: -1;
		opacity: 0;
	}
	
	.backT {
		width: 100%;
		height: 202upx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	
	.backMain {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -3;
	}
	
	.backB {
		width: 100%;
		height: 548upx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -2;
	}
	
	
	
	.explainStr{
		box-sizing: border-box;
		padding-left: 16upx;
		position: relative;
	}
	.explainStr::before{
		content: "";
		width: 8upx;
		height: 8upx;
		border-radius: 50%;
		background: #333333;
		position: absolute;
		left: 0;
		top: 14upx;
	}
	.platformCancel{
		width: 100%;
		height: 110upx;
		border-top: 2upx solid #E4E4E4;
		line-height: 110upx;
		text-align: center;
		font-size: 34upx;
		color: #576A94;
		border-radius: 0 0 20upx 20upx;
		margin-top: 38upx;
	}
	.platformWrap{
		width: 640upx;
		padding-top: 72upx;
		border-radius: 20upx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 1000000;
		background: white;
	}
	.platformMark{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.5);
		z-index: 999999;
	}
	.platformTit{
		font-size: 34upx;
		color: #333333;
		margin-bottom: 48upx;
		font-weight: bold;
		text-align: center;
	}
	.platformItem{
		width: 544upx;
		height: 88upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8upx;
		margin: 0 auto 20upx;
	}
	.platformItem>view{
		font-size: 30upx;
		color: white;
		line-height: 30upx;
		margin-left: 14upx;
	}
	
	
	
	.tcDetailTit{
		font-size: 28upx;
		line-height: 28upx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30upx;
	}
	.tcDetailBItem{
		margin-bottom: 48upx;
	}
	.tcDetailBItem:last-child{
		margin-bottom: 0;
	}
	.tcDetailBItemT{
		font-size: 24upx;
		line-height: 24upx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 24upx;
	}
	.tcDetailBItemB>view{
		margin-bottom: 24upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tcDetailBItemB>view:last-child{
		margin-bottom: 0;
	}
	.tcDetailBItemB>view>view:nth-child(1){
		padding-left: 36upx;
		font-size: 20upx;
		line-height: 20upx;
		position: relative;
		color: #333333;
	}
	.tcDetailBItemB>view>view:nth-child(1)::before{
		content: "";
		width: 4upx;
		height: 4upx;
		border-radius: 50%;
		background: #333333;
		position: absolute;
		left: 16upx;
		top: 50%;
		transform: translateY(-50%);
	}
	.tcDetailBItemB>view>view:nth-child(2){
		font-size: 20upx;
		font-weight: bold;
		color: #333333;
	}
	
	
.OfferDetails{
	background-color: #F3F3F3;
	height: 100vh;
	// #ifdef MP-WEIXIN
	// padding-top: 80upx;
	// #endif
	padding-bottom: 148upx;
	overflow: auto;
	.IconBox{
		display: flex;
		align-items: center;
		padding: 0 24upx;
	}
	.NavigationBox{
		position: fixed;
		width: 750upx;
		height: 80upx;
		// #ifdef MP-WEIXIN
		top: 0;
		// #endif
		z-index: 999;
		box-shadow: 0upx 0upx 2upx #999999;
	}
	.OfferDetailsBox{
		margin-top: 8upx;
		.OfferDetails_top{
			padding: 32upx 24upx;
			background-color: #fff;
			.shopBox{
				display: flex;
				align-items: center;
				padding-top: 24upx;
				.shopIcon{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 24upx;
					height: 24upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.shopName{
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-left: 8upx;
				}
			}
			.shoptitle{
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				padding: 24upx 0 8upx 0;
			}
			.DiscountBox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16upx 0 0 0;
				.DiscountItemBox{
					display: flex;
					align-items: center;
					.DiscountItem{
						display: flex;
						align-items: center;
						margin-right: 24upx;
						.DiscountName{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
							margin-left: 8upx;
						}
					}
				}
				.volume{
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		.explainBox{
			padding: 32upx 24upx;
			background-color: #fff;
			margin-top: 16upx;
			.RichBox{
				margin-bottom: 32upx;
			}
		}
		.addressBox{
			// width: 702upx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 8upx;
			margin-top: 16upx;
			padding: 24upx;
			background-color: #fff;
			.addressTitleBox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.addresstitle{
					font-size: 28upx;
					color: #333333;
				}
			}
			.addressNameBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 44upx 0;
				border-bottom: 2upx solid #EFEFEF;
				.addressName{
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
				}
			}
			.Detailed-address{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 24upx;
				.Detailed_L{
					display: flex;
					align-items: center;
					.Detailedtext{
						width: 480upx;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-left: 8upx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.Detailed_R{
					display: flex;
					align-items: center;
					.DetailedNum{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-right: 8upx;
					}
				}
			}
		}
		.evaluateBox{
			padding: 32upx 24upx;
			background-color: #fff;
			margin-top: 16upx;
			.feedbackBox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 24upx;
				.feedbacktitle{
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;	
				}
			}
			.evaluateList{
				.evaluateItem{
					display: flex;
					padding: 32upx 0;
					border-top: 2upx solid #EDEDED;
					.userImage{
						width: 72upx;
						height: 72upx;
						border-radius: 50%;
						overflow: hidden;
						// background-color: #F0AD4E;
						margin-right: 16upx;
						background-size: cover;
						background-position: center;
						// image{
						// 	width: 100%;
						// 	height: 100%;
						// 	border-radius: 50%;
						// }
					}
					.evaluateInfo{
						width: calc(100% - 88upx);
						.userName{
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
						.evaluatetitme{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
							margin-top: 16upx;
						}
						.evaluatecont{
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							line-height: 34upx;
							color: #333333;
							margin-top: 24upx;
						}
						.evaluateImage{
							margin-top: 24upx;
							display: flex;
							flex-wrap: wrap;
							.ImageItem{
								width: 144upx;
								height: 144upx;
								border-radius: 8upx;
								margin-right: 12upx;
								// background-color: #F0AD4E;
								margin-bottom: 16upx;
								background-size: cover;
								background-position: center;
								// image{
								// 	width: 100%;
								// 	height: 100%;
								// }
							}
							.ImageItem:nth-child(4n+4){
								margin-right: 0;
							}
						}
					}
				}
				.MoreEvaluation{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 32upx;
					border-top: 2upx solid #EDEDED;
					.MoreName{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
		.bottomBtn{
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			width: 750upx;
			height: 124upx;
			background: #FFFFFF;
			opacity: 1;
			padding: 16upx 24upx;
			border-top: 2upx solid #EDEDED;
			z-index: 99999;
			.fansbtn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 224upx;
				height: 92upx;
				background: #FFAC3F;
				opacity: 1;
				border-radius: 20upx;
				.btnIcon{
					width: 48upx;
					height: 48upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.btntext{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 8upx;
					.fansNum{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
			.sharebtn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 222upx;
				height: 92upx;
				background: #FF6B3F;
				opacity: 1;
				border-radius: 20upx;
				.btntext{
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.shareMp{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 222upx;
				height: 92upx;
				background: #FF6B3F;
				opacity: 1;
				border-radius: 20upx;
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
			.Rushbtn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 224upx;
				height: 92upx;
				background: #FFAC3F;
				opacity: 1;
				border-radius: 20upx;
				.btntext{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 24upx;
					color: #fff;
					text-align: cenetr;
					.fansNum{
					}
				}
			}
		}
	}
}
</style>
